<template>
	<view class="pager  ">
		<view class="pager-container">
			<view class="page-turning" @click="prePage">
				<view class="cu-left-arrows"></view>
				<text class="turning-txt" style="margin-left:20rpx;">上一页</text>
			</view>
			<view class="page-info  ">
				<input @input="bindInput" @confirm="bindGo" @blur="bindGo" maxlength="-1" type="text"
					:value="page.page+1" class="info-input"></input>
				<text class=" " style="margin:0 10rpx;">/</text>
				<text class=" ">{{page.totalPages+'页'}}</text>
			</view>
			<view class="page-turning  " @click="nextPage">
				<text class="turning-txt  " style="margin-right:20rpx;">下一页</text>
				<view class="cu-right-arrows  "></view>
			</view>
		</view>
		<!-- <view class=" " style="height:24px;width:100vw;" v-if="bottomSafeHeight>0"></view> -->
	</view>
</template>

<script>
	export default {
		props: {
			page: {
				type: Object,
				default () {
					return {};
				}
			},
		},
		data() {
			return {

			}
		},
		// computed: {
		//     bottomSafeHeight: function() {
		//         return e.getStorageSync("deviceInfo").bottomSafeAreaHeight;
		//     }
		// },
		methods: {
			prePage: function() {
				this.$emit("prev");
			},
			nextPage: function() {
				this.$emit("next");
			},
			bindInput: function(e) {
				this.$emit("pageInput", {
					inputDetail: e.detail.value
				});
			},
			bindGo: function(e) {
				this.$emit("go");
			}
		}
	}
</script>

<style lang="scss">
	.pager {
		backdrop-filter: blur(10px);
		background: rgba(26, 26, 26, .9);
		bottom: 0;
		display: flex;
		flex-direction: column;
		position: fixed;
		width: 100vw;
	}

	.pager-container {
		align-items: center;
		display: flex;
		height: 100rpx;
		justify-content: space-between;
		padding: 0 40rpx;
		width: 100vw;
	}

	.pager-container .page-turning {
		align-items: center;
		display: flex;
	}

	.pager-container .page-turning .turning-txt {
		color: hsla(0, 0%, 100%, .7);
		font-size: 26rpx;
	}

	.pager-container .page-info {
		align-items: center;
		display: flex;
		font-size: 28rpx;
	}

	.pager-container .page-info .info-input {
		border: 2rpx solid #fff;
		border-radius: 4rpx;
		color: #ffe725;
		display: inline-block;
		height: 56rpx;
		padding: 0 10rpx;
		text-align: center;
		width: 100rpx;
	}
</style>